<template>
  <div>
    <!-- 
      声明式导航：利用router-link这个组件标签来实现导航的方式就叫声明式导航
      总结：router-link最终渲染出来的还是a标签
            选中的导航对应渲染出来的a标签中自带有激活类名(我们就可以通过这个类名设置高亮效果)
            to属性最终渲染成a标签的href属性
     -->
    <!-- <a href="#/find">发现音乐</a> |
    <a href="#/my">我的音乐</a> |
    <a href="#/friend">朋友</a> -->
    <router-link to="/find">发现音乐</router-link> |
    <router-link :to="`/my/${id}`">我的音乐</router-link> |
    <!-- 
      声明式导航传值：
      方式一：
        1、在router-link的to属性上写上需要传递的参数
        to="/path?参数名=值"
        2、在跳转的目标页面(组件)中，用$route.query.参数名进行接收
          注意：$route.query是固定语法
      方式二：
        1、路由规则对象中添加参数的配置：path:"/path/:参数名"
        2、在router-link的to属性上进行传值：to="/path/值"
        3、接收，在目标路由页面接收，$route.params.参数名
     -->
    <router-link to="/friend?name=小明">朋友</router-link>
    <!-- 7、设置挂载点 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default  {
  data(){
    return {
      id: 123
    }
  }
}
</script>